<template>
  <div class="client">
    <!-- 操作区 -->
    <div class="card top">
      <span>客户端</span>
      <el-input v-model="input" placeholder="请输入客户端ID"></el-input>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-search"
        @click="search"
        >搜索</el-button
      >
      <el-button size="mini" icon="el-icon-refresh" @click="init"
        >重置</el-button
      >
    </div>
    <!-- 表格区 -->
    <div class="card tablebox">
      <el-table :data="tableData" border>
        <el-table-column prop="clientid" label="客户端ID" align="center">
          <template slot-scope="scope">
            <div @click="triggerUpdate(scope.row)">
              {{ scope.row.clientid }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="node" label="节点" align="center">
        </el-table-column>
        <el-table-column prop="ip_address" label="IP地址" align="center">
        </el-table-column>
        <el-table-column
          prop="keepalive"
          label="类型"
          align="center"
          :formatter="formatterType"
        >
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.keepalive === 30
                  ? 'danger'
                  : scope.row.keepalive === 60
                  ? 'success'
                  : 'primary'
              "
              disable-transitions
              >{{
                scope.row.keepalive === 30
                  ? "服务端"
                  : scope.row.keepalive === 60
                  ? "Web端"
                  : "设备端"
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="connected"
          label="连接状态"
          align="center"
          :formatter="formatterConnected"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.connected === true ? 'success' : 'primary'"
              disable-transitions
              >{{ scope.row.connected === true ? "已连接" : "未连接" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="keepalive" label="心跳（秒）" align="center">
        </el-table-column>
        <el-table-column
          prop="expiry_interval"
          label="会话过期间隔"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="subscriptions_cnt"
          label="当前订阅数量"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="connected_at" label="连接时间" align="center">
        </el-table-column>
        <el-table-column prop="created_at" label="会话创建时间" align="center">
        </el-table-column>
        <el-table-column label="操作"> </el-table-column>
      </el-table>
    </div>
    <!-- 分页区 -->
    <el-pagination
      @size-change="init"
      @current-change="init"
      :current-page.sync="pagination.pageNum"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>

    <!-- dialog -->
    <el-dialog title="详情" :visible.sync="dialogTableVisible" width="60%">
      <div class="tabnav">
        <p class="select" ref="p1" @click="selectcard">基本信息</p>
        <p ref="p2" @click="selectcard">订阅列表</p>
      </div>

      <div class="divbox">
        <div ref="div1" class="show">
          <el-descriptions
            class="margin-top"
            :column="2"
            size="medium  "
            border
          >
            <el-descriptions-item>
              <template slot="label"> 节点 </template>
              {{ infodata.node }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 客户端ID </template>
              {{ infodata.clientid }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 清除Session </template>
              {{ infodata.clean_start }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 会话过期间隔(秒) </template>
              {{ infodata.expiry_interval }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 用户名 </template>
              {{ infodata.username }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 协议类型 </template>
              {{ infodata.proto_ver }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 会话创建时间 </template>
              {{ infodata.created_at }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 订阅数量 </template>
              {{ infodata.subscriptions_cnt }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> IP地址 </template>
              {{ infodata.ip_address }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 端口 </template>
              {{ infodata.port }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 最大订阅数量 </template>
              {{ infodata.max_subscriptions }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 飞行窗口 </template>
              {{ infodata.inflight }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 心跳(秒) </template>
              {{ infodata.keepalive }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 是否为桥接 </template>
              {{ infodata.is_bridge }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 最大飞行窗口 </template>
              {{ infodata.max_inflight }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 消息队列 </template>
              0/{{ infodata.max_mqueue }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 连接时间</template>
              {{ infodata.connected_at }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 连接状态 </template>
              <span :style="{ color: 'green' }">
                {{ infodata.connected === true ? "已连接" : "未连接" }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 最大消息队列 </template>
              {{ infodata.max_mqueue }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 未确认的PUBREC数据包计数 </template>
              {{ infodata.mailbox_len }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> Zone </template>
              {{ infodata.zone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 最大未确认的PUBREC数据包计数 </template>
              {{ infodata.max_awaiting_rel }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 接收的TCP报文数量 </template>
              {{ infodata.recv_cnt }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 接收的PUBLISH报文数量 </template>
              {{ infodata.recv_msg }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 接收的字节数量 </template>
              {{ infodata.recv_oct }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 接收的MQTT报文数量 </template>
              {{ infodata.recv_pkt }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 发送的TCP报文数量 </template>
              {{ infodata.send_cnt }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 发送的PUBLISH报文数量 </template>
              {{ infodata.send_msg }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 发送的字节数量 </template>
              {{ infodata.send_oct }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 发送的MQTT报文数量 </template>
              {{ infodata.send_pkt }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div ref="div2">
          <div class="btnbox">
            <el-button
              type="primary"
              icon="el-icon-refresh-left"
              plain
              size="mini"
              @click="againGetBuyList"
              >刷新</el-button
            >
            <el-button
              type="success"
              icon="el-icon-plus"
              plain
              size="mini"
              disabled
              >添加订阅</el-button
            >
          </div>
          <el-table
            :data="dialogTableData"
            border
            v-loading="dialogTableLoading"
            style="width: 100%"
          >
            <el-table-column
              prop="topic"
              label="主题"
              width="300"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="qos" label="QoS" width="180" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center"> </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "client",
  data() {
    return {
      input: "",
      tableData: [
        // {
        //   clientid: 567, //客户端ID
        //   node: "c40b2d8ea5c3@172.17.0.5", //节点
        //   ip_address: "121.43.146.217", //IP地址
        //   // keepalive: 30, //类型  30：服务端 60：Web端 5：设备端
        //   connected: true, //连接状态  true已连接 false未连接
        //   keepalive: 30, //心跳（秒）
        //   expiry_interval: 0, //会话过期间隔
        //   subscriptions_cnt: 7, //当前订阅数量
        //   connected_at: "2022-09-22 16:13:01", //连接时间
        //   created_at: "2022-09-22 16:13:01", //会话创建时间
        // },
      ],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      // dialog
      dialogTableVisible: false,
      size: "",
      // 基本信息数据
      infodata: {
        node: "",
        clientid: "",
        clean_start: false,
        expiry_interval: 0,
        username: "wumei",
        proto_ver: 4,
        created_at: "",
        subscriptions_cnt: 46,
        ip_address: "",
        port: 1232,
        max_subscriptions: 0,
        inflight: 0 / 32,
        keepalive: 24,
        is_bridge: false,
        max_inflight: 32,
        max_mqueue: 0 / 1000,
        connected_at: "",
        connected: true,
        mailbox_len: 0,
        zone: "",
        max_awaiting_rel: 0,
        recv_cnt: 24,
        recv_msg: 0,
        recv_oct: 1872,
        recv_pkt: 2,
        send_cnt: 64,
        send_msg: 42,
        send_oct: 10661,
        send_pkt: 32,
      },
      dialogTableData: [],
      dialogTableLoading: false,
    };
  },
  methods: {
    // 表格格式化类型
    formatterType(row) {
      if (row.keepalive === 30) return "服务端";
      else if (row.keepalive === 60) return "Web端";
      else if (row.keepalive === 5) return "设备端";
    },
    // 格式化连接状态
    formatterConnected(row) {
      return row.connected === true ? "已连接" : "未连接";
    },

    // 搜索
    search() {
      let clientid = this.input;
      this.init(_, clientid);
    },
    // 获取初始化数据
    async init(_, clientid) {
      try {
        let { pageNum, pageSize } = this.pagination;
        let { code, data, meta } = await this.$api.client.getlist(
          pageSize,
          pageNum,
          _,
          clientid
        );
        if (+code === 0) {
          this.tableData = data;
          this.pagination.total = meta.count;
        }
      } catch (_) {}
    },
    // dialog选项卡
    selectcard() {
      let arr = [this.$refs.p1, this.$refs.p2];
      let arr2 = [this.$refs.div1, this.$refs.div2];
      arr.forEach((item, index) => {
        item.onclick = () => {
          for (let i = 0; i < arr.length; i++) {
            arr[i].className = "";
            arr2[i].className = "";
          }
          item.className = "select";
          arr2[index].className = "show";
        };
      });
    },

    // 点击盒子触发出来dialog
    async triggerUpdate(row) {
      try {
        let clientid = row.clientid;
        let result = await this.$api.client.getDetailInfo(clientid);
        result = result.data[0];
        this.infodata.node = result.node;
        this.infodata.clientid = result.clientid;
        this.infodata.clean_start = result.clean_start;
        this.infodata.expiry_interval = result.expiry_interval;
        this.infodata.username = result.username;
        this.infodata.proto_ver = result.proto_ver;
        this.infodata.created_at = result.created_at;
        this.infodata.subscriptions_cnt = result.subscriptions_cnt;
        this.infodata.ip_address = result.ip_address;
        this.infodata.port = result.port;
        this.infodata.max_subscriptions = result.max_subscriptions;
        this.infodata.inflight = result.inflight;
        this.infodata.keepalive = result.keepalive;
        this.infodata.is_bridge = result.is_bridge;
        this.infodata.max_inflight = result.max_inflight;
        this.infodata.max_mqueue = result.max_mqueue;
        this.infodata.connected_at = result.connected_at;
        this.infodata.connected = result.connected;
        this.infodata.mailbox_len = result.mailbox_len;
        this.infodata.zone = result.zone;
        this.infodata.max_awaiting_rel = result.max_awaiting_rel;
        this.infodata.recv_cnt = result.recv_cnt;
        this.infodata.recv_msg = result.recv_msg;
        this.infodata.recv_oct = result.recv_oct;
        this.infodata.recv_pkt = result.recv_pkt;
        this.infodata.send_cnt = result.send_cnt;
        this.infodata.send_msg = result.send_msg;
        this.infodata.send_oct = result.send_oct;
        this.infodata.send_pkt = result.send_pkt;

        // 获取订阅列表
        let buyList = await this.$api.client.getBuyInfo(clientid);
        this.dialogTableData = buyList.data;
        this.dialogTableVisible = true;
      } catch (_) {}
    },
    //刷新订阅列表
    async againGetBuyList() {
      try {
        this.dialogTableLoading = true;
        let clientid = this.infodata.clientid;
        // 获取订阅列表
        let buyList = await this.$api.client.getBuyInfo(clientid);
        this.dialogTableData = buyList.data;
      } catch (_) {}
      this.dialogTableLoading = false;
    },
  },

  created() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.client {
  margin-left: 10px;
  background: #fff;
  border-radius: 20px;
  width: 100%;
  margin-top: 10px;
  .card {
    padding: 15px 20px 20px 20px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-bottom: 6px;
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
  }
  .top {
    display: flex;
    span {
      display: inline-block;
      width: 68px;
      line-height: 36px;
      text-align: right;
      vertical-align: middle;
      padding: 0 12px 0 0;
      font-size: 14px;
      color: #606266;
      font-weight: 700;
    }
    /deep/.el-input {
      width: 20%;
      font-size: 13px;
      line-height: 36px;
      margin-right: 10px;
      .el-input__inner {
        height: 30px;
        line-height: 30px;
      }
    }
    button {
      height: 30px;
      margin-top: 4px;
      vertical-align: middle;
    }
  }
  .tablebox {
    .el-table td.el-table__cell div {
      cursor: pointer;
      color: #1890ff;
    }
  }

  .el-pagination {
    padding-bottom: 100px;
    padding-left: 600px;
    background: #fff;
  }
  .el-dialog {
    .tabnav {
      display: flex;
      p:hover {
        color: #1890ff;
        cursor: pointer;
      }
      p:nth-child(1) {
        margin-right: 20px;
        padding-bottom: 6px;
        box-sizing: border-box;
      }
      .select {
        color: #1890ff;
        border-bottom: 1px solid #1890ff;
      }
    }
    .divbox {
      div {
        display: none;
        .el-descriptions {
          margin-top: 10px;
          display: block;
        }
      }
      .show {
        display: block;
      }
      .btnbox {
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      .el-table {
        display: block;
      }
    }
  }
}
</style>